<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px">
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="外壳编号">
        <el-input @change="searchChange" v-model="formData.shellId" placeholder="外壳编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="片区名称">
        <el-input @change="searchChange" v-model="formData.chargingGroupName" placeholder="片区名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="SIM卡ID">
        <el-input v-model="formData.iccid" placeholder="SIM卡ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人姓名">
        <el-input @change="searchChange" v-model="formData.partnerName" placeholder="合伙人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="合伙人手机号">
        <el-input @change="searchChange" v-model="formData.partnerMobile" placeholder="合伙人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="formData.enableFlag" @change="searchChange" clearable>
          <el-option key="1" label="未启用" value="0"></el-option>
          <el-option key="2" label="启用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formData.status" @change="searchChange" clearable>
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安装状态">
        <el-select v-model="formData.type" @change="searchChange" clearable>
          <el-option v-for="(item,index) in installOptions" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>充电桩数量：{{chargingCount}}</div>
      <div>在线充电桩数量：{{onlineChargingCount}}</div>
      <div>离线充电桩数量：{{offlineChargingCount}}</div>
      <div>断电充电桩数量：{{powerCutChargingCount}}</div>
    </div>
    <avue-crud ref="crud"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @size-change="sizeChange"
      @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>充电桩编号：<span>{{scope.row.code}}</span></div>
          <div>外壳条码ID：<span>{{scope.row.shellId}}</span></div>
          <div>SIM卡ID：<span>{{scope.row.iccid}}</span></div>
          <div>型号/功率：<span>{{scope.row.chargingTypeName}} / {{scope.row.power/1000}}KW</span></div>
          <div>接口标准：<span>{{scope.row.interfaceStandard}}</span></div>
          <div>快慢类型：<span v-if="scope.row.fastChargeType==0">慢</span><span v-else>快</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="pileCondition">
        <div class="cell">
          <div>创建时间：<span>{{scope.row.createDate}}</span></div>
          <div>最后使用日期：<span>{{scope.row.lastUseTime}}</span></div>
          <div>未使用天数：<span>{{scope.row.daysNoUse}}</span></div>
          <div>上线时间：<span>{{scope.row.onlineDate}}</span></div>
          <div>下线时间：<span>{{scope.row.offlineDate}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="auditInfo">
        <div class="cell">
          <div>合伙人姓名：<span>{{scope.row.partnerName}}</span></div>
          <div>合伙人手机号码：<span>{{scope.row.partnerMobile}}</span></div>
          <div>片区编号：<span>{{scope.row.chargingGroupId}}</span></div>
          <div>片区名称：<span>{{scope.row.chargingGroupName}}</span></div>
          <div>所属运营商：<span>{{scope.row.merchantName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="manageInfo">
        <div class="cell">
          <div>今日分佣金额：<span>{{scope.row.todayDivideAmount}}</span></div>
          <div>今日分佣订单数量：<span>{{scope.row.todayDivideCount}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="socketInfo">
        <div class="cell">
          <div>空闲中：<span>{{scope.row.expireSocketCount}}</span></div>
          <div>充电中：<span>{{scope.row.chargingSocketCount}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="receiverInfo">
        <div class="cell">
          <div>收货人姓名：<span>{{scope.row.receiver}}</span></div>
          <div>收货人手机号：<span>{{scope.row.receiverMobile}}</span></div>
          <div>申请原因：<span>{{scope.row.reason}}</span></div>
          <div>收货地址：<span>{{scope.row.address}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell">
          <div>计费方式：<span>{{scope.row.billingMethod}}</span></div>
          <div>计费规则：<span>{{scope.row.chargingRule}}</span></div>
          <div>收费方式：<span>{{scope.row.chargingMethod}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{scope.row.isRefund == 0?'否':'是'}}</span></div>
          <div>订单实际支付金额：<span>{{scope.row.actualAmount}}</span></div>
          <div>退款金额：<span>{{scope.row.refundAmount}}</span></div>
          <div>退款原因：<span>{{scope.row.refundReason}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="operation">
        <div class="list_btn">
          <div class="editbtn" @click="moveIn(scope)" v-if="scope.row.partnerMobile && !scope.row.chargingGroupId">移入站点</div>
          <div class="editbtnno" @click="$message({message: '设备已绑定站点',type: 'warning'})" v-else-if="scope.row.partnerMobile">移入站点</div>
          <div class="editbtnno" @click="$message('设备未发货')" v-else-if="!scope.row.partnerMobile">移入站点</div>

          <div class="editbtn" @click="remove(scope)" v-if="scope.row.partnerMobile && scope.row.chargingGroupId && scope.row.chargingSocketCount == 0">移出站点</div>
          <div class="editbtnno" @click="$message({message: '该设备正在使用中,请稍后移出',type: 'warning'})" v-else-if="scope.row.partnerMobile && scope.row.chargingGroupId && scope.row.chargingSocketCount > 0">移出站点</div>
          <div class="editbtnno" @click="$message('设备未安装')" v-else>移出站点</div>

          <div class="editbtn" @click="recovery(scope)" v-if="scope.row.partnerMobile && !scope.row.chargingGroupId">设备回收</div>
          <div class="editbtnno" @click="$message({message: '请先将设备移出站点',type: 'warning'})" v-else-if="scope.row.partnerMobile && scope.row.chargingGroupId">设备回收</div>
          <div class="editbtnno" @click="$message('设备未安装')" v-else>设备回收</div>

          <div class="editbtn" @click="lookUp(scope)">查看</div>
        </div>
      </template>
    </avue-crud>

    <!-- 移入站点 -->
    <el-dialog width="65%" :visible.sync="dialogmove" top="10vh" :close-on-click-modal="false">
      <div class="dialogmove_header">
        <div class="dialogmove_list">
          充电桩编号：{{facilitydata.code}}
        </div>
        <div class="dialogmove_list">
          外壳条形码ID：{{facilitydata.shellId}}
        </div>
        <div class="dialogmove_list">
          SIM卡ID：{{facilitydata.iccid}}
        </div>
        <div class="dialogmove_list">
          类型：{{facilitydata.chargingTypeName}}
        </div>
        <div class="dialogmove_list">
          所属运营商：{{facilitydata.merchantName}}
        </div>
        <div class="dialogmove_list">
          所属站点类型：{{facilitydata.deviceType==0?'电动自行车':facilitydata.deviceType==1?'充电汽车':facilitydata.deviceType==2?'租电':facilitydata.deviceType==3?'充电宝':''}}
        </div>
        <div class="dialogmove_list">
          创建时间：{{facilitydata.createDate}}
        </div>
        <div class="dialogmove_list">
          信号强度：{{facilitydata.qos}}
        </div>
        <div class="dialogmove_list">
          合伙人姓名：{{facilitydata.partnerName}}
        </div>
        <div class="dialogmove_list">
          合伙人手机号码：{{facilitydata.partnerMobile}}
        </div>
      </div>
      <div class="search">
        片区名称 <el-input class="ipt" v-model="areaName" placeholder="请输入片区名称" ></el-input><el-button class="btn" type="primary">搜索</el-button>
      </div>
      <el-table
        ref="multipleTable"
        height="400"
        :data="tableData"
        v-loading="tableloading"
        border
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        @current-change="handleSelectionChange">
        <el-table-column
          width="55">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="片区编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="片区名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="regionName"
          label="所在地区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center;margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pages.currentPage"
        :page-size="pages.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
      <div class="dialogmove_btn">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button type="info" @click="dialogmove = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog width="65%" :visible.sync="dialoglookUp">
      <div class="dialogmove_header">
        <div class="dialogmove_list">
          充电桩编号：{{lookdata.code}}
        </div>
        <div class="dialogmove_list">
          外壳条形码ID：{{lookdata.shellId}}
        </div>
        <div class="dialogmove_list">
          SIM卡ID：{{lookdata.iccid}}
        </div>
        <div class="dialogmove_list">
          类型：{{lookdata.chargingTypeName}}
        </div>
        <div class="dialogmove_list">
          所属运营商：{{lookdata.merchantName}}
        </div>
        <div class="dialogmove_list">
          所属站点类型：{{lookdata.deviceType==0?'电动自行车':lookdata.deviceType==1?'充电汽车':lookdata.deviceType==2?'租电':lookdata.deviceType==3?'充电宝':''}}
        </div>
        <div class="dialogmove_list">
          信号强度：{{lookdata.qos}}
        </div>
        <div class="dialogmove_list">
          创建时间：{{lookdata.createDate}}
        </div>
      </div>
      <el-table
        :data="tableDatasee"
        height="400"
        border
        style="width: 100%">
        <el-table-column
          width="200"
          prop="operationTime"
          label="操作时间">
        </el-table-column>
        <el-table-column
          prop="operationMethod"
          width="150"
          label="操作方式">
        </el-table-column>
        <el-table-column
          prop="operationBy"
          width="150"
          label="操作人">
        </el-table-column>
        <el-table-column
          prop="type"
          label="添加信息">
          <template slot-scope="scope" v-if="scope.row.type == 1">
            <div>站点编号：{{ scope.row.chargingGroupId }}</div>
            <div>站点名称：{{ scope.row.chargingGroupName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="移除信息">
          <template slot-scope="scope" v-if="scope.row.type == 0 || scope.row.type == 2">
            <div>站点编号：{{ scope.row.chargingGroupId }}</div>
            <div>站点名称：{{ scope.row.chargingGroupName }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center;margin-top:10px;"
        @size-change="handleSizeChangesee"
        @current-change="handleCurrentChangesee"
        :current-page.sync="pagess.currentPage"
        :page-size="pagess.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagess.total">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  import { tableOption } from '@/crud/pile/mechantPileList'
  export default {
    data () {
      return {
        dataList: [],
        dataListLoading: false,
        tableloading: true,
        tableOption: tableOption,
        formData: {
          code: '',
          shellId: '',
          chargingGroupName: '',
          partnerName: '',
          partnerMobile: '',
          status: '',
          createDate: '',
          type: '',
          deviceType:1
        },
        statusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '在线',
            value: 1
          },
          {
            label: '断网离线',
            value: 0
          },
          {
            label: '断电离线',
            value: 2
          }
        ],
        installOptions: [
          {
            label: '已安装',
            value: '1'
          },
          {
            label: '未安装',
            value: '2'
          },
          {
            label: '已发货',
            value: '3'
          },
          {
            label: '未发货',
            value: '4'
          }
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        // 片区
        pages: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        // 查看
        pagess: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        options: [],
        chargingCount:0,
        offlineChargingCount: 0,
        onlineChargingCount: 0,
        powerCutChargingCount: 0,

        dialogmove: false,
        facilitydata: {},
        lookdata: {},
        areaName: '',
        tableData: [],
        dialoglookUp: false,
        tableDatasee: [],
        pid: '',  // 选择片区的id
      }
    },

    mounted () {
      this.getDataList(null,this.formData)
    },

    methods: {
      handleSizeChange(val){
        this.pages.pageSize = val
        this.getsiteList(this.facilitydata.id)
      },
      handleCurrentChange(val) {
        this.pages.currentPage = val
        this.getsiteList(this.facilitydata.id)
      },
      handleSizeChangesee(val){
        this.pagess.pageSize = val
        this.getlookupinfo(this.lookdata.id)
      },
      handleCurrentChangesee(val) {
        this.pagess.currentPage = val
        this.getlookupinfo(this.lookdata.id)
      },
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/charging/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          this.dataList = data.data.chargingListIPage.records
          this.page.total = data.data.chargingListIPage.total
          this.chargingCount=data.data.chargingCount
          this.offlineChargingCount=data.data.offlineChargingCount
          this.onlineChargingCount=data.data.onlineChargingCount
          this.powerCutChargingCount=data.data.powerCutChargingCount
          this.dataListLoading = false
        })
      },

      // 条件查询
      searchChange () {
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.startTime = this.formData.createDate[0]
          this.formData.endTime = this.formData.createDate[1]
        }
        else {
          this.formData.startTime = ''
          this.formData.endTime = ''
        }
        this.page.currentPage=1
        this.getDataList(this.page, this.formData)
      },
      // 条件查询
      searchChanges () {
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.startTime = this.formData.createDate[0]
          this.formData.endTime = this.formData.createDate[1]
        }
        else {
          this.formData.startTime = ''
          this.formData.endTime = ''
        }
        this.getDataList(this.page, this.formData)
      },

      /**
       * 刷新回调
       */
      refreshChange () {
        this.dialogmove = false
        this.getDataList(this.page)
      },

      lookOrUpdate (row, type) {
        this.$router.push({
          name: type == 1 ? 'pileInfo' : 'updatePileInfo',
          query: {
            id: row.id
          }
        })
      },
      //发货
      deliver (row) {
        this.$router.push({
          name: 'deliverPile',
          query: {
            id: row.id
          }
        })
      },

      // 查看物流
      lookExpress (row, type) {
        this.showCheckExpress = true
        this.$nextTick(() => {
          this.$refs['checkExpress'].init(row, type)
        })
      },

      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page, this.formData)
      },


      // 移入站点
      moveIn(e){
        console.log(e,"阿三打火锅")
        this.facilitydata = e.row
        this.getsiteList(e.row.id)
        this.dialogmove = true
      },
      // 获取站点列表
      getsiteList(id){
        this.tableloading = true
        this.$http({
          url: this.$http.adornUrl('/v1/charging/get/charging/group/by/charging/id'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: this.pages.currentPage,
                size: this.pages.pageSize,
                id: id
              },
            )
          )
        }).then(res => {
          console.log(res.data.data.list.records,"片区列表")
          res.data.data.list.records.forEach(e => {
            e.checked = false
          })
          this.tableData = res.data.data.list.records
          this.pages.total = res.data.data.list.total
          this.tableloading = false
        })
      },
      // 选择站点
      handleSelectionChange(val) {
        console.log(val,"选择的站点")
        if(!val){
          return
        }
        this.tableData.forEach(item => {
          if (item.id == val.id) {
            item.checked = true
            this.pid = val.id
          }else if(item.id != val.id){
            item.checked = false
          }
        })
        console.log(this.tableData,'站点')
      },
      confirm(){
        if(!this.pid){
          this.$message({message: '请先选择站点',type: 'warning'})
          return
        }
        let arr = []
        arr.push(this.facilitydata.id)
        this.$http({
          url: this.$http.adornUrl('/v1/charging/move/in/charging/group'),
          method: 'POST',
          data: this.$http.adornData({
              id: this.pid,
              chargingIds: arr
          })
        }).then(res => {
          this.$message({
            message: '移入成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogmove = false
              this.pid = ''
              this.searchChanges()
            }
          })
        })
      },

      // 移出站点
      remove(e){
        console.log(e)
        this.$confirm(`确定移出站点?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$http({
            url: this.$http.adornUrl('/v1/charging/move/out/charging/group'),
            method: 'POST',
            data: this.$http.adornData({
                id: e.row.id
            })
          }).then(res => {
            this.$message({
              message: '移出成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.searchChanges()
              }
            })
          })
        }).catch(()=>{

        })
      },
      // 设备回收
      recovery(e){
        console.log(e)
        this.$confirm(`确定进行收回操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$http({
            url: this.$http.adornUrl('/v1/charging/recovery'),
            method: 'POST',
            data: this.$http.adornData({
                id: e.row.id
            })
          }).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.searchChanges()
              }
            })
          })
        }).catch(()=>{

        })
      },
      // 查看
      lookUp(e){
        console.log(e)
        this.dialoglookUp = true
        this.lookdata = e.row
        this.getlookupinfo(e.row.id)
      },
      // 获取查看信息(操作日志)
      getlookupinfo(id){
        this.$http({
          url: this.$http.adornUrl('/v1/charging/operation/log'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: this.pagess.currentPage,
                size: this.pagess.pageSize,
                chargingId: id
              },
            )
          )
        }).then(res => {
          console.log(res.data.data.records)
          this.tableDatasee = res.data.data.records
          this.pagess.total = res.data.data.total
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cell{
    text-align: left;
  }
  .el-input{
    width: 100%;
  }
  .menu-list{
    margin-bottom: 10px;
  }
  .item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    div{
      margin-right: 10px;
    }
  }
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
  .list_btn {
    .editbtn {
      color: #009FF1;
    }
    .editbtn:hover {
      cursor: pointer;
    }
    .editbtnno {
      cursor: pointer;
      color: gray;
    }
  }
  .dialogmove_header {
    display: flex;
    flex-wrap: wrap;
    .dialogmove_list {
      margin-right: 80px;
      margin-bottom: 20px;
    }
  }
  .search {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .ipt {
      width: 200px;
      margin-left: 20px;
    }
    .btn {
      margin-left: 20px;
      padding: 8px 20px;
    }
  }
  .dialogmove_btn {
    margin-top: 20px;
    button {
      padding: 8px 20px;
    }
  }
</style>
